<!DOCTYPE html>
<html>
<head>
	<title>Basic Throttle</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
	<link rel="stylesheet" href="/jquery/css/jquery.ui.all.css">
	
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript" src="websock.js"></script>
	<script type="text/javascript" src="/jquery/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="/jquery/jquery.ui.core.js"></script>
	<script type="text/javascript" src="/jquery/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="/jquery/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="/jquery/jquery.ui.slider.js"></script>
	
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	
	<script type="text/javascript">
	  google.load('visualization', '1', {packages: ['gauge']});
	</script>
	<script type="text/javascript" src="throttle.js?1500"></script>
	
	<script type="text/javascript">
		initThrottlePage(false);
	</script>
	<style>
	input[type=button]{
		width:100%;
	}
	</style>
</head>
<body class="dialog">
<div class="throttle">
	<table>
	<tr>
		<td align="center" colspan="2">
			<div id="gauge_div" style="text-align:center;width:150px;"></div>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<table>
				<tr>
					<td><div id="slider"></div></td>
					<td width="20" id="speed" title="Set speed">10</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td width="50%">
			<input type="button" value="Stop" onclick='$("#slider").slider("option", "value", 0);' />
		</td>
		<td width="50%">
			<input type="button" id="btnDirection" value="Forward" onclick='throttle.toggleDirection();' />
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" id="btnHorn" value="Horn" onmousedown='throttle.blowHorn();' onmouseup='throttle.stopHorn();' />
		</td>
		<td>
			<input type="button" id="btnBell" value="Bell: Off" onclick='throttle.toggleBell();' />
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" id="btnLight" value="Light: Off" onclick='throttle.toggleLight();' />
		</td>
		<td>
			<input type="button" id="btnMute" value="Mute: Off" onclick='throttle.toggleMute();' />
		</td>
	</tr>
	<tr>
		<td colspan="2">
			Next Switch:
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" value="Close" onclick='throttle.setNextSwitch(SWITCH_CLOSED);' />
		</td>
		<td>
			<input type="button" value="Throw" onclick='throttle.setNextSwitch(SWITCH_THROWN);' />
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<span id="spanTrainState">State: Halted</span>
		</td>
	</tr>
	</table>
</div>
</body>
</html>